<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.p044}}
				</view>
				<view class="flex-1 text-alignR A-Medium record" :class="model=='light'?'recordLight':''">
					<view @click="$tool.navTo('/pages/property/tixianjilu')" class="pr-3">
						{{i18n.p045}}
					</view>
				</view>
			</view>
		</view>
		<view style="height: 24rpx;">

		</view>
		<view class="flex mx-3 align-center justify-between">
			<view class="topTitle A-Medium" :class="model=='light'?'topTitleLight':''">
				{{i18n.p046}}
			</view>
			<view class="record" :class="model=='light'?'topTitleLight':''">
				{{coinType}}
			</view>
		</view>
		<view class="topTitle mt-4 A-Medium ml-3" :class="model=='light'?'topTitleLight':''">
			{{i18n.p047}}
		</view>
		<view class="flex ml-3 record D-Bold align-end" style="margin-top: 24rpx;"
			:class="model=='light'?'recordLight':''">
			<view class="mr-1" style="font-size: 48rpx;font-weight: bold;">
				{{
						coinType=='USDT'?USDTMoney.a:
						coinType=='BTC'?BTCMoney.a:
						coinType=='ETH'?ETHMoney.a:''
					}}
			</view>
			<view class="mb-1">
				{{coinType}}
			</view>
		</view>
		<view class="formWrap mt-4 px-3 A-Regular">
			<!-- 提币网络 -->
			<view class="formTitle">
				{{i18n.p048}}
			</view>
			<view @click="openPopup" class="inputWrap px-3 flex align-center"
				:class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="coinNetwork" disabled :placeholder="i18n2.st026"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view class="f0">
					<image style="width: 18rpx;height: 12rpx;" :src="'/static/images/downArrow_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="formTitle">
				{{i18n.p049}}
			</view>
			<view @click="goSelect" class="inputWrap px-3 flex align-center"
				:class="model=='light'?'inputWrapLight':''">
				<input v-model="withdrawAddress" disabled type="text" :placeholder="i18n2.st027"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view class="f0">
					<image style="width: 36rpx;height: 36rpx;" :src="'/static/images/tx1_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="formTitle">
				{{i18n.p050}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input v-model="withdrawAmount" type="text" :placeholder="i18n2.st028" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view @click="all" class="codeText">
					{{i18n.p051}}
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view @click="submit" class="btn mx-auto A-Medium mt-6 clickCss">
			{{i18n.p052}}
		</view>
		<view style="margin-top: 66rpx;" class="recordWrap A-Regular mx-3 py-4 px-3"
			:class="model=='light'?'recordWrapLight':''">
			<view class="text4" :style="model=='light'?'color: #0E0F11;':''">
				{{i18n.p053}}
			</view>
			<view class="text5 my-2">
				1、{{i18n.p054}}<br> 2、{{i18n.p055}}
			</view>
		</view>
		<view class="" style="height: 30rpx;">

		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupWrap A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view class="titleWrap py-4 mx-3 flex align-center justify-between">
					<view class="f0 opacity0">
						<image src="@/static/images/cha.png" mode=""></image>
					</view>
					<view class="">
						{{i18n.p056}}
					</view>
					<view @click="closePopup" class="f0">
						<image src="@/static/images/cha.png" mode=""></image>
					</view>
				</view>
				<view class="noiteWrap flex align-center mx-3 px-3 py-2 A-Regular"
					:class="model=='light'?'noiteWrapLight':''">
					<view class="f0 mr-1">
						<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/tx2_'+model+'.png'" mode="">
						</image>
					</view>
					<view class="">
						{{i18n.p057}}
					</view>
				</view>
				<view @click="confirm(item)" v-for="(item,index) in list" class="list m-3 p-3"
					:class="model=='light'?'listLight':''">
					{{item}}
				</view>
				<view class="" style="height: 68rpx;">

				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		withdrawAdd
	} from '@/core/api/index.js';
	export default {
		data() {
			return {
				type: 1,
				coinNetwork: '',
				coinType: '',
				withdrawAddress: '',
				withdrawAmount: '',
				list: ['Tron (TRC20)', 'Ethereum (ERC20)'],
				isSubmit:false,
			}
		},
		onLoad(options) {
			// 
			this.type = options.type;
			if (options.type == 2) {
				this.list = ['BTC'];
			}
			if (options.type == 3) {
				this.list = ['ETH'];
			}
			this.coinType = uni.getStorageSync('txType');
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.withdrawAddress = uni.getStorageSync('withdrawAddress');
			uni.removeStorageSync('withdrawAddress');
				// 用户余额
			this.$store.dispatch('config/getAassetList');
		},
		computed: {
			i18n() {
				return this.$t('property');
			},
			i18n2() {
				return this.$t('showToast');
			},
			model() {
				return this.$store.state.config.model;
			},
			USDTMoney() {
				return this.$store.state.config.USDTMoney
			},
			BTCMoney() {
				return this.$store.state.config.BTCMoney
			},
			ETHMoney() {
				return this.$store.state.config.ETHMoney
			},
		},
		methods: {
			all(){
				this.withdrawAmount = this.coinType=='USDT'?this.USDTMoney.a:
				this.coinType=='BTC'?this.BTCMoney.a:
				this.coinType=='ETH'?this.ETHMoney.a:''
			},
			submit() {
				if (this.coinNetwork === '') return this.$tool.showToast(this.i18n2.st026);
				if (this.withdrawAddress === '') return this.$tool.showToast(this.i18n2.st027);
				if (this.withdrawAmount === '') return this.$tool.showToast(this.i18n2.st028);
				this.$tool.showLoading();
				if(this.isSubmit){
					return;
				}else{
					this.isSubmit = true;
				}
				withdrawAdd({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					coinNetwork: this.coinNetwork,
					coinType: this.coinType,
					withdrawAddress: this.withdrawAddress,
					withdrawAmount: this.withdrawAmount,
				}).then(res => {
					uni.hideLoading();
					this.$tool.showToast(this.i18n2.st022);
					setTimeout(res => {
						this.$tool.goBack();
					}, 800)
					console.log(res, 'cs');
				}).catch(res => {
					this.isSubmit = false;
					uni.hideLoading();
				})
			},
			goSelect() {
				if (this.coinNetwork === '') return this.$tool.showToast(this.i18n2.st026);
				uni.setStorageSync('coinNetwork', this.coinNetwork);
				this.$tool.navTo('/pages/txAddress/txAddress');
			},
			openPopup() {
				this.$refs.popup.open('bottom');
			},
			confirm(e) {
				this.closePopup();
				if (this.coinNetwork == e) {
					return;
				}
				this.coinNetwork = e;
				this.withdrawAddress = '';
			},
			closePopup() {
				this.$refs.popup.close();
			},
		}
	}
</script>

<style scoped lang="scss">
	.noiteWrap {
		background: #16181C;
		font-size: 24rpx;
		color: #A8AAB1;
	}

	.noiteWrapLight {
		background: #F3F3F4;
		color: #7F838D;
	}

	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;

		.titleWrap {
			margin-bottom: 6rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.list {
			border: 2rpx solid #1F2128;
		}

		.listLight {
			border: 2rpx solid #F4F4F4;
		}
	}

	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}

	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordLight {
		color: #0E0F11;
	}

	.topTitle {
		font-size: 28rpx;
		color: #7F838D;
	}

	.topTitleLight {
		color: #0E0F11;
	}

	.formWrap {
		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}

		.inputWrap {
			width: 690rpx;
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 35rpx;

			.area {
				font-size: 28rpx;
				color: #AAACB8;
			}

			.areaLight {
				color: #7F838D;
			}

			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}

			.inputTextLight {
				color: #0E0F11;
			}

			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}

			.placeholderClassLight {
				color: #B5B7BF;
			}

			.img1 {
				width: 15rpx;
				height: 11rpx;
				margin-left: 16rpx;
				margin-right: 42rpx;
			}

			.img2 {
				width: 40rpx;
				height: 40rpx;
			}

			.codeText {
				font-size: 28rpx;
				color: #5951BA;
			}
		}

		.inputWrapLight {
			background: #FFFFFF;
		}

		.forgetPass {
			font-size: 28rpx;
			color: #5951BA;
		}
	}

	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordWrap {
		margin-top: 104rpx;

		.text1 {
			font-size: 24rpx;
			color: #7F838D;
			margin-top: 44rpx;
			margin-bottom: 46rpx;
		}

		.text2 {
			font-size: 22rpx;
			color: #7F838D;
			margin-top: 42rpx;
			margin-bottom: 32rpx;
		}

		.text3 {
			font-size: 24rpx;
			color: #AAACB8;
		}

		.text4 {
			font-size: 24rpx;
			color: #F7F7F7;
		}

		.text5 {
			font-size: 20rpx;
			color: #EBAC00;
		}

		.text6 {
			font-size: 22rpx;
			color: #7F838D;
		}
	}

	.recordWrapLight {}
</style>